<template>
  <!-- 申请人员基本信息弹窗 -->
  <view v-if="visible" class="member-detail-mask" @click="handleClose"></view>
  <view v-if="visible" class="member-detail-popup">
    <view class="member-detail-header">
      <text class="member-detail-title">申请人员基本信息</text>
      <view class="close-btn" @click="handleClose">
        <text class="close-icon">×</text>
      </view>
    </view>

    <view v-if="member" class="member-detail-content">
      <view class="member-avatar-section">
        <image class="member-detail-avatar" :src="member.avatar" mode="aspectFill"></image>
        <view class="member-basic-info">
          <text class="member-name">{{ member.name }}</text>
          <text class="member-role">{{ member.role }}</text>
        </view>
      </view>
      <view class="member-info-list">
        <view class="info-item">
          <text class="info-label">姓名</text>
          <text class="info-value">{{ member.name }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">职务</text>
          <text class="info-value">{{ member.role }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">公司</text>
          <text class="info-value">{{ member.company }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">职位</text>
          <text class="info-value">{{ member.position }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">申请状态</text>
          <text class="info-value status-text">待审核</text>
        </view>
        <view class="info-item">
          <text class="info-label">申请备注</text>
          <textarea v-model="member.reason" placeholder="请输入申请备注" class="info-reason" />
        </view>
      </view>

      <view class="member-actions">
        <wd-button type="success" size="small" @click="handleApprove">通过</wd-button>
        <wd-button type="error" size="small" @click="handleReject">拒绝</wd-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";

// 定义成员信息接口
interface PendingMember {
  id: string;
  name: string;
  role: string;
  avatar: string;
  company: string;
  position: string;
  status: number;
  reason: string;
}

// 定义 props
interface Props {
  visible: boolean;
  member: PendingMember | null;
}

// 定义 emits
interface Emits {
  (e: "update:visible", value: boolean): void;
  (e: "approve", member: PendingMember): void;
  (e: "reject", member: PendingMember): void;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  member: null,
});

const emit = defineEmits<Emits>();

// 关闭弹窗
const handleClose = () => {
  emit("update:visible", false);
};

// 通过申请
const handleApprove = () => {
  emit("approve", props.member!);
};

// 拒绝申请
const handleReject = () => {
  emit("reject", props.member!);
};
</script>

<style lang="scss" scoped>
/* 申请人员基本信息弹窗样式 */
.member-detail-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.member-detail-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  z-index: 1000;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.member-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #f8f9fa;
}

.member-detail-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.close-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: #f0f0f0;
  transition: all 0.3s ease;
}

.close-btn:active {
  background-color: #e0e0e0;
}

.close-icon {
  font-size: 32rpx;
  color: #666;
  font-weight: bold;
}

.member-detail-content {
  padding: 30rpx;
  flex: 1;
  overflow-y: auto;
}

.member-avatar-section {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.member-detail-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 20rpx;
  border: 4rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.member-basic-info {
  flex: 1;
}

.member-name {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.member-role {
  display: block;
  font-size: 26rpx;
  color: #666;
}

.member-info-list {
  margin-bottom: 30rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  .info-reason {
    width: 100%;
    height: 50rpx;
    padding-left: 20rpx;
    font-size: 28rpx;
  }
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  flex-shrink: 0;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  text-align: right;
  flex: 1;
  margin-left: 20rpx;
}

.status-text {
  color: #fa8c16;
  font-weight: 500;
}

.member-actions {
  display: flex;
  gap: 20rpx;
  justify-content: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .member-detail-popup {
    width: 95%;
    max-height: 85vh;
  }

  .member-detail-header {
    padding: 20rpx;
  }

  .member-detail-content {
    padding: 20rpx;
  }
}
</style>
